<template>
  <div class="container page">

  <div class="recomond">
    <p v-bind:class="{choose: tabA === 0}" v-on:click="chooseTab(0)">全部</p>
    <p v-bind:class="{choose: tabA === 10}" v-on:click="chooseTab(10)">待付款</p>
    <p v-bind:class="{choose: tabA === 20}" v-on:click="chooseTab(20)">待发货</p>
    <p v-bind:class="{choose: tabA === 40}" v-on:click="chooseTab(40)">待收货</p>
    <p v-bind:class="{choose: tabA === 50}" v-on:click="chooseTab(50)">已完成</p>
  </div>


 <div class="orderlist" :key="order" v-for="order of orderList">
   <div class="order" style="text-align: right;font-size:20rpx;" @click="orderDetail(order.order_no)">
        <div style="text-align: left">订单号: {{order.order_no}}</div>
        <div v-if="order.status === 50">交易成功</div>
        <div v-else-if="order.status === 10">待付款</div>
        <div v-else-if="order.status === 20">待发货</div>
        <div v-else-if="order.status === 40">待收货</div>
        <div v-else-if="order.status === 0">已取消</div>
        <div v-else-if="order.status === 70">已退款</div>
        <div v-else=""> 交易关闭</div>
   </div>

  <p style="border-top: 1px dashed #ddd;margin-top:20rpx;"></p>
    <!-- <div class="porduct" :key="porduct" v-for="(porduct, index_) of order.orderPorduct"  @click="orderDetail(order.order_no)">
      <div>{{porduct.product_name}}</div>

        <img :src="porduct.product_image">
      <div>数量{{porduct.quantity}}</div>
    </div> -->

   <div class="flex" :key="porduct" v-for="(porduct, index_) of order.orderPorduct" @click="orderDetail(order.order_no)">
        <ul class="flexs">
            <img :src="porduct.product_image" class="shop" />
        </ul>
        <ul class="flexs2">
            <p class="shopname" style="font-size:25rpx;margin-top:60rpx">{{porduct.product_name}}</p>
            <p class="zt" style="font-size:20rpx;">数量{{porduct.quantity}}</p>
            <!-- <p class="shopname" style="font-size:30rpx;margin-top:60rpx">{{product.name}}</p>
            <p class="zt" style="font-size:20rpx;">{{product.subtitle}}</p>
            <p class="zt" style="font-size:20rpx;">月销量:{{product.saled_num}}个</p>
            <p class="zt" style="font-size:20rpx;">库存:{{product.stock}}个</p>
            <p class="je">￥{{product.price}}</p> -->
        </ul>
    </div>


   <div style="font-size:20rpx;margin-top:50rpx" >实付款: ￥{{order.payment}}</div>
   <div v-if="order.status === 10" style="font-size:20rpx;">未支付订单将于2天后自动关闭</div>
  
        <div v-if="order.shipping_id" style="text-align: left;font-size:20rpx;margin-top:20rpx">物流单号: {{order.shipping_id}}</div>

        <div class="display" v-if="order.status === 10">
            <ul class="display-button"></ul>
            <!-- <ul class="display-buttons"><button class="button">查看物流</button></ul> -->
            <ul class="display-buttons"><button class="buttons" style="border-radius:0"  @click="wxpay(order.order_no)">立即支付</button></ul>
        </div>

        <div class="display" v-if="order.status === 40">
            <ul class="display-button"></ul>
            <ul class="display-buttons"><button class="button" style="border-radius:0" @click="shipping(order.shipping_id)">查看物流</button></ul>
            <span>&nbsp</span>
            <ul class="display-buttons"><button class="buttons" style="border-radius:0" @click="confirmGoods(order.order_no)">确认收货</button></ul>
        </div>

        <div class="display" v-if="order.status === 50">
            <ul class="display-button"></ul>
            <ul class="display-buttons"><button class="button" style="border-radius:0" @click="shipping(order.shipping_id)">查看物流</button></ul>
        </div>
   
    <!-- <div style="height:80rpx;line-height:80rpx;margin:10rpx;;background-color:#44CFDC;text-align:center;" v-if="order.status === 10" @click="wxpay(order.order_no)">立即支付</div> -->

    <!-- <div>
      <img :src="order.main_image">
    </div> -->
    <!-- <div class="des">
      <p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{order.name}}</p>
      <p style="height: 60rpx;"></p>
      <p class="price"><span>库存:{{order.stock}}个</span><span style="text-align:right;font-size: 40rpx;color:#44CFDC;">¥{{order.price}}</span></p>
    </div> -->
  </div>


  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import qcloud from 'wafer2-client-sdk'
 
import {showSuccess, showModal} from '@/util'
import {get, post, getAuth, postAuth } from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
 
  data () {
    return {
      tabA: 0,
      orderList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `为女性恢复年轻及孩子健康成长提供一站式解决方案。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
    shipping(shippingId) {
      wx.navigateTo({
        url: `/pages/shippinginfo/main?shippingid=${shippingId}`
      })
    },
    confirmGoods(orderNo){

        postAuth(`geweb/order/confirm_receipt?userid=${wx.getStorageSync('user').id}&orderno=${orderNo}`, {}, {})
        .then(result => {
          
          if(result.code === 200) {

              wx.navigateTo({
                url: '/pages/alert/main?info=已确认收货'
              })


              // wx.showToast({
              //   title: '确认收获成功',
              //   icon: 'none'
              // })

              // wx.showLoading();
              // this.tabA = 0
              // this.get_orderlist("")
              // wx.hideLoading();

          }


        })

    },
    wxpay(orderNo) {
        // console.log(orderNo)
        // console.log(JSON.parse(wx.getStorageSync('session_key')).openid)
        // console.log(wx.getStorageSync('user').id)
        postAuth(`geweb/wxpay/create?openid=${JSON.parse(wx.getStorageSync('session_key')).openid}&userid=${wx.getStorageSync('user').id}&order_no=${orderNo}`, {}, {})
        .then(result => {

          if(result.code === 200) {

            // console.log(result)

            wx.requestPayment(
            {
            // 'appId': 'wxa13b77d438fbf138',
            'timeStamp': result.res.timeStamp,
            'nonceStr': result.res.nonceStr,
            'package': result.res.package,
            'signType': 'MD5',
            'paySign': result.res.paySign,
            'success':function(res){
              console.log('支付成功')
              postAuth(`geweb/order/order_pay?openid=${JSON.parse(wx.getStorageSync('session_key')).openid}&userid=${wx.getStorageSync('user').id}&orderno=${orderNo}`, {}, {})
              .then(result => {
               
                if(result.code === 200) {

                    wx.navigateTo({
                      url: '/pages/alert/main?info=订单已支付成功'
                    })

                }


              })

                    // wx.navigateTo({
                    //   url: '/pages/alert/main?info=订单已支付成功'
                    // })
                    // wx.showToast({
                    //   title: '订单支付成功',
                    //   icon: 'none'
                    // })

                    // wx.switchTab({
                    //   url: `/pages/usercenter/main`
                    // })

            },
            'fail':function(res){
              console.log('支付失败')
              wx.showToast({
                title: '支付失败',
                icon: 'none'
              })

            },
            'complete':function(res){
              console.log('支付完成')

            }
            })

          }
          else {
            wx.showToast({
              title: '支付失败',
              icon: 'none'
            })
          }
          
        })
    },
    chooseTab(x) {
      this.tabA = x;
      if(x === 0) {
        this.get_orderlist("");
      } else {
        this.get_orderlist(x);
      }
    },
    async orderDetail(orderno) {
      wx.navigateTo({
        url: `/pages/orderdetail/main?orderno=${orderno}`
      })
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    async get_orderlist(status) {
      return await getAuth(`geweb/order/get_orderlist?userid=${JSON.parse(wx.getStorageSync('user').id)}&status=${status}`, {}, {}).then(result => {

        // wx.showLoading();
        if(result.code === 301) {
          // wx.hideLoading();
          // console.log("去登陆")
          wx.switchTab({
            url: `/pages/usercenter/main`
          })
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
        }

        if(result.code === 200) {
            console.log(result.res)
            this.orderList = result.res;
            // wx.hideLoading();
        }
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }
  },
  onShow () {
    Object.assign(this.$data, this.$options.data())
    // this.orderList = []
    // wx.showLoading();
    this.tabA = 0
    this.get_orderlist("")
    // wx.hideLoading();

  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 40rpx;
  margin-top: 40rpx;  
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  // color: #78b8ad;
  color: #ffffff;
  background-color: black;
}

.porduct {
  padding: 50rpx;
  text-align: left;
}

.orderlist {
    margin: 0 25rpx;
    padding: 25rpx;
    margin-top: 50rpx;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.order{
  text-align: right;
  display: flex;
     div {
       flex: 1;
     }
}
.porduct {
      img{
        width: 80rpx;
        height:80rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
}
.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.tb{
        width: 100%
    }
    .flex{
        display: flex;
        margin-top: 50rpx;
    }
    .flexs{
        flex: 1
    }
    .flexs2{
    flex: 1;
    margin-right: 30rpx;
    }
    .shop{
        width:250rpx;
        height:250rpx;
        margin-left: 20px;
       
        margin-right: 30px;
    }
    .vvu{
        font-size: 24px;
        margin-top: 10rpx;
    }
    .zt{
        font-size: 14px;
    }
    .shopname{
        margin-bottom: 15px;
    }
    .je{
        margin-top: 15px;
        background: #C8D3D1;
        width: 90px;
    }


    .display{
		display:flex;
        text-align: center;
	}
    .display-button{
        flex: 2;
    }
    .display-buttons{
        flex: 1;
        
    }
    .button{
        font-size: 25rpx;
        // font-weight:bold;
        width:85px;
        height:60rpx;
        line-height:60rpx;
        // background: #cfe7e7;
        border: 1px solid #707070;
        color: #000;
        margin-bottom: 10px;
        // margin-top: 30px
    }
    .buttons{
        // font-weight:bold;
        font-size: 25rpx;
        width:85px;
        height:60rpx;
        line-height:60rpx;
        // background: #636363;
        background-color: #000;
        color: white;
        // margin-top: 30px
    }
</style>
